import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Select, message } from 'antd';
import { getList, editor } from 'hook/userList';

const FormItem = Form.Item;
const { Option } = Select;

export default props => {
    const {
        form: { getFieldDecorator, resetFields, validateFields, getFieldsValue },
        visible,
        setModalVisible,
        handleFetchList,
        id,
        setEditorId
    } = props;

    const [detail, setDetail] = useState({});

    useEffect(() => {
        if (id) {
            getList({ id }, res => setDetail(res.data[0] || {}), res => message.error(res.msg));
        }
    }, [id]);

    // 提交
    const handleSubmit = async () => {
        const formItem = ['editor_chineseName', 'editor_role', 'editor_email', 'editor_verify_state'];
        const formValue = getFieldsValue(formItem);
        // 删除所有没有实际值的条件
        for (const [key, val] of Object.entries(formValue)) {
            const actualVal = typeof val === 'string' ? val.trim() : val;
            if (~key.indexOf('editor_')) {
                Reflect.deleteProperty(formValue, key);
                formValue[key.split('editor_')[1]] = actualVal;
            }
        }

        validateFields()
            .then(() => {
                editor(id, formValue,
                    () => {
                        message.success('编辑成功');
                        handleFetchList();
                        setModalVisible(false);
                        resetFields();
                        setDetail({});
                        setEditorId(0);
                    },
                    res => message.error(res.msg)
                )
            })
            .catch(err => {});
    }
    // 取消
    const handleCancel = () => {
        setModalVisible(false);
        resetFields();
    }

    return (
        <Modal
            title='修改用户信息'
            visible={visible}
            onOk={handleSubmit}
            onCancel={handleCancel}
            className="white-list-form"
            okText="确定"
            cancelText="取消"
        >
            <Form>
                <FormItem label="用户名">
                    {getFieldDecorator('editor_chineseName', {
                        initialValue: detail.chineseName,
                        rules: [{
                            required: true,
                            message: '用户名不能为空'
                        }]
                    })(<Input placeholder="请输入用户名" />)}
                </FormItem>
                <FormItem label="身份">
                    {getFieldDecorator('editor_role', {
                        initialValue: detail.role !== undefined && detail.role.toString(),
                        rules: [{
                            required: true,
                            message: '身份不能为空'
                        }]
                    })(<Select placeholder="请选择用户身份">
                        <Option value="0">普通用户</Option>
                        <Option value="1">管理员</Option>
                    </Select>)}
                </FormItem>
                <FormItem label="邮箱">
                    {getFieldDecorator('editor_email', {
                        initialValue: detail.email,
                        rules: [{
                            required: true,
                            message: '邮箱不能为空'
                        }]
                    })(<Input placeholder="请输入邮箱" />)}
                </FormItem>
                <FormItem label="审核状态">
                    {getFieldDecorator('editor_verify_state', {
                        initialValue: detail.verify_state !== undefined && detail.verify_state.toString(),
                        rules: [{
                            required: true,
                            message: '审核状态不能为空'
                        }]
                    })(<Select placeholder="请选择审核状态">
                        <Option value="0">老用户未申请</Option>
                        <Option value="1">审核中</Option>
                        <Option value="2">审核通过</Option>
                    </Select>)}
                </FormItem>
            </Form>
        </Modal>
    );
}